<template>
  <div>
    <div>
      <div class="button-spacing">
        <el-input style="width: 200px" placeholder="请输入名称" suffix-icon="el-icon-search"
                  v-model="name"></el-input>
        <el-button class="ml-5" type="primary" @click="load">搜索</el-button>
        <el-button type="warning"  @click="reset">重置</el-button>
        <el-upload
            action="http://59.34.60.82:34343/pdf/upload"
            :show-file-list="false"
            :before-upload="handleBeforeUpload"
            :on-error="handleFileUploadError"
            :on-success="handleFileUploadSuccess"
            style="display: inline-block">
          <el-button type="primary" class="ml-5" :disabled="isUploading" >上传文件<i class="el-icon-top"></i></el-button>
        </el-upload>
        <el-popconfirm
            class="ml-5"
            confirm-button-text='确定'
            cancel-button-text='取消'
            icon="el-icon-info"
            icon-color="red"
            title="您确定批量处理这些数据吗？"
            @confirm="extractBatch"
        >
          <el-button type="danger" slot="reference">批量处理 <i class="el-icon-remove-outline"></i></el-button>
        </el-popconfirm>
      </div>

      <el-table
          v-loading="loading"
          element-loading-spinner="el-icon-loading"
          :data="tableData" border stripe :header-cell-class-name="'headerBg'"
          @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column prop="id" label="ID" width="100"></el-table-column>
        <el-table-column prop="orgname" label="文件名称"></el-table-column>
        <el-table-column prop="name" label="文件名称"></el-table-column>
        <el-table-column prop="url" label="文件路径"></el-table-column>
        <!--        <el-table-column prop="path" label="文件路径"></el-table-column>-->
        <el-table-column prop="type" label="文件类型" width="50" ></el-table-column>
        <el-table-column label="下载">
          <template slot-scope="scope">
            <el-button type="primary" @click="download(scope.row.url)">下载查看</el-button>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="200" align="center">
          <template slot-scope="scope">
            <el-popconfirm
                class="ml-5"
                confirm-button-text='确定'
                cancel-button-text='取消'
                icon="el-icon-info"
                icon-color="red"
                title="您确定删除吗？"
                @confirm="del(scope.row.id)"
            >
              <el-button type="danger" slot="reference">删除 <i class="el-icon-remove-outline"></i></el-button>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import axios from 'axios';
export default {
  data() {
    return {
      loading: true,
      tableData: [],
      isUploading: false,
      name: "",
      multipleSelection: [],
      pageNum:1,
      pageSize:5,
      total:0
    }
  },
  mounted(){
    document.title = '外单单据PDF文档上传';
  },
  created() {
    this.load()
  },
  methods: {
    load() {
      axios.get("http://59.34.60.82:34343/pdf/selectPage", {
        params: {
          pageNum: this.pageNum,
          pageSize: this.pageSize,
          name: this.name
        }
      }).then(res => {
        if (res.data) {
          this.tableData = res.data.data;
          // this.total = res.data.total;
        } else {
          // 处理数据格式不正确或其他情况
          this.$message.error('加载数据失败，响应格式不正确');
        }
        this.loading = false;
      }).catch(error => {
        this.loading = false;
        // 处理请求错误
        console.error('请求失败：', error);
        this.$message.error('加载数据失败，请检查网络连接或稍后重试');
      });
    },
    del(id) {
      this.loading = true;
      axios.delete("http://59.34.60.82:34343/pdf/delete/" + id).then(res => {
        console.log(res)
        if (res.status===200) {
          this.$message.success("删除成功")
          this.load()
        } else {
          this.$message.error("删除失败")
        }
      })
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    extractBatch() {
      this.loading = true;
      let ids = this.multipleSelection.map(v => v.id)  // [{}, {}, {}] => [1,2,3]
      if(ids.length==0){
        this.$message.success("至少选择一条数据！")
        this.loading = false;
        return
      }
      axios.post("http://59.34.60.82:34343/pdf/extractbatch/", ids).then(res => {
        if (res.data) {
          let data = res.data
          let code = data.code
          if (0==code){
            this.$message.success("批量处理成功")
          }else{
            this.$message.success(data.data)
          }
          this.load()
        } else {
          this.loading = false;
          this.$message.error("批量处理失败")
        }
      })
    },
    reset() {
      this.loading = true;
      this.name = ""
      this.load()
    },
    handleSizeChange(pageSize) {
      this.pageSize = pageSize
      this.load()
    },
    handleCurrentChange(pageNum) {
      this.pageNum = pageNum
      this.load()
    },
    handleBeforeUpload(){
      this.loading = true;
      this.isUploading = true;
    },
    handleFileUploadError(){
      this.$message.success("上传失败")
      this.loading = false;
      this.isUploading = false;
      this.load()
    },
    handleFileUploadSuccess(res){
      this.$message.success(res.data)
      this.loading = true;
      this.isUploading = false;
      this.load()
    },
    download(url){
      this.loading = true;
      window.open(url)
      this.loading = false;
    }
  }
}
</script>

<style>
.button-spacing {
  /* 使用 Flexbox 布局 */
  display: flex;
  /* 水平居中 */
  justify-content: center;
  /* 垂直居中（假设 .button-spacing 的高度是确定的） */
  align-items: center;
  margin: 10px;
  /* 如果高度不确定，你可能需要设置高度并使用其他技巧来垂直居中 */
  /* 例如，使用伪元素和 flexbox 的 margin: auto; 技巧 */
  /* height: 100vh; 或其他你需要的值 */

  /* 为了更好地查看效果，你可以添加一些背景色或边框 */
  /* background-color: #f5f5f5; */
  /* border: 1px solid #ddd; */

  /* 如果需要，也可以给容器添加内边距 */
  /* padding: 20px; */
}

/* 如果你不想让 .el-upload 的按钮也被居中，可以单独处理 */
.el-upload {
  /* 移除 flex 属性，或者根据需要设置特定的 flex 属性 */
  /* display: block; 或者其他你需要的值 */
}

/* 为了确保子元素之间有间隙，你可以给它们添加 margin */
.button-spacing > * {
  /* 添加外边距，注意这可能不适用于 .el-upload，因为它包含了自己的按钮 */
  margin: 0 10px; /* 根据需要调整 */
}

/* 移除第一个和最后一个子元素的外边距，以避免额外的空间 */
.button-spacing > *:first-child {
  margin-left: 0;
}

.button-spacing > *:last-child {
  margin-right: 0;
}

</style>
